<template>
  <div>
    <div style="float: left">
      <el-button type="primary" @click="Update_category" size="small"
        >新增</el-button
      >
    </div>
    <!-- {{category.data}} -->
    <el-table
      :data="category.data"
      size="small"
      style="width: 100% font-size:20px;font-weight:'bold"
    >
      <el-table-column prop="id" label="编号" width="100" align="center">
      </el-table-column>
      <el-table-column prop="name" label="分类名称" align="center">
      </el-table-column>
      <el-table-column prop="description" label="分类简介" align="center">
      </el-table-column>
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <!-- 修改 -->
          <el-button
            type="warning"
            icon="el-icon-edit"
            circle
            @click="edit_cate(scope.row)"
          ></el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delete_cate(scope.row.id)"
          ></el-button>
          <!-- <el-link >删除</el-link> -->
          <!-- <el-link >修改</el-link> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增模态框 -->
    <el-dialog :title="title" :visible.sync="dialog_category" width="70%">
  <!-- {{form_category}} -->
      <el-form :model="form_category">
        <el-form-item label="新增的分类名称" :label-width="formLabelWidth_cate">
          <el-input v-model="form_category.name"></el-input>
        </el-form-item>

        <el-form-item label="分类简介" :label-width="formLabelWidth_cate">
          <el-input v-model="form_category.description"></el-input>
        </el-form-item>
        <!-- <el-form-item label="序号" :label-width="formLabelWidth_cate">
          <el-input v-model="form_category.id" disabled></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_category = false">取 消</el-button>
        <el-button type="primary" @click="save_cate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//辅助函数，可以快速获取状态机里的变量或方法
import { mapActions, mapState } from "vuex";
export default {
  //计算属性
  computed: {
    //获取变量
    ...mapState("category", ["category"]),
  },
  data() {
    return {
      dialog_category: false,
      form_category: {},
      formLabelWidth_cate: "120px",
      title: "新增分类信息",
    };
  },
  created() {
    this.findCate();
  },
  methods: {
    indexMethod(index) {
      index+=1;
      return index;
    },
    ...mapActions("category", ["findCate", "saveCate", "deleteCate"]),
    //显示新增模态框
    Update_category() {
      this.dialog_category = true;
      // this.form_category = {};
    },
    //保存新增分类
    save_cate() {
      this.saveCate(this.form_category).then((res) => {
        //关闭模态框
        this.dialog_category = false;
        // 情况模态框数据
        this.form_category = {};
        // 刷新页面
        this.findCate();
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else if (res.status == 500) {
          this.$notify({
            title: "错误",
            message: res.message,
            type: "error",
          });
        }
        this.findCate();
      });
    },
    //修改分类
    edit_cate(val) {
      this.title = "修改分类信息";
      this.dialog_category = true;
      this.form_category = JSON.parse(JSON.stringify(val));
    },
    //删除分类
    delete_cate(id) {
      this.deleteCate({ id }).then((res) => {
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else if (res.status == 500) {
          this.$notify({
            title: "错误",
            message: res.message,
            type: "error",
          });
        }
        this.findCate();
      });
    },
  },
};
</script>